<template>
  <div class="home">
    <div class="home-header">
      <van-row>
        <van-col span="20">
          <van-search v-model="seachValus" shape="round" background="#01acf5" placeholder="搜索本地书籍" />
        </van-col>
        <van-col span="4" class="btn-mag" :class="{active:isdel}" @click="toggleDel">
          <div>
            <van-icon name="setting" class="icon-img" />
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="book-box">
      <van-row>
        <van-col span="8" v-for="(item,index) in DataList" :key="index">
          <div class="book-frame">
            <img :src="$store.state.imgbaseUrl +item.coverImg" alt="" @click="goChapter(item.bookId)">
            <div class="book-delbtn" v-show="isdel" @click="delbook">删除</div>
          </div>
        </van-col>

        <van-col span="8">
          <div class="book-frame">
            <div class="book-delbtn" style="fontSize: 50px;">
              <van-icon name="plus" />
            </div>
          </div>
        </van-col>


      </van-row>
    </div>
  </div>
</template>

<script>
  import '../assets/scss/Home.scss';
  import localrequest from '../assets/localapi/fake.js';


  export default {
    name: 'Home',
    data() {
      return {

        seachValus: '',
        isdel: false,
        txtimg: 'http://pt.yuenov.com:17777/file/group1/book/4c94dd78-c1f0-4841-b8b3-107ce2c4d880.jpg',
        lists: [],

      }
    },
    created() {
      // this.getDiscovery();
    },
    methods: {
      toggleDel() {

        this.isdel = !this.isdel;
        // console.log(this.isdel);
      },
      delbook() {

        console.log('删除书籍');
      },
      // 点击阅读小说
      goChapter(bookId) {
        console.log('读书读书',bookId);
      },
      getDiscovery() {
        // /app/open/api/category/discovery
        this.$store.commit('updatedDiscovery');

      },
      // 获取章节
      getList() {
        this.axios({
          method: 'POST',
          url: '/app/open/api/book/checkUpdate',
          data: {
            books: [{
                bookId: 48772,
                chapterIdList: 1257009666827862018
              },
              {
                bookId: 32019,
                chapterIdList: 0
              }
            ]

          }
        }).then(result => {
          console.log('获取章节=》', result);
        }).catch(err => {
          console.log(err);
        })
      },
      // 获取本地数据测试
      getlocaltion() {
        localrequest.getData('books.json').then(res => {
          console.log('res=>', res);
          console.log(typeof (res.data));

        });
      }
    },
    computed: {
      DataList() {
        return this.$store.state.localbooks;
      }
    },
  }
</script>

<style>
  img {
    width: 60px;
  }
</style>